﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Compare.aspx.cs" Inherits="Compare" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="Content/Compare.css" rel="stylesheet" />
    <style>
        #btnAddCompareProduct {
            float:right;
            margin-right:30px;
            margin-top:20px;
        }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="compare-container">
        <div class="compare-top">
            <div class="compare-choose">
                <div class="cate-phone">
                    <img src="images/boxicon-phone2.png" />
                </div>
                <div class="cate-pad cate-hover">
                    <img src="images/boxicon-pad.png" />
                </div>
                <div class="cate-wear cate-hover">
                    <img src="images/boxicon-wear.png" />
                </div>
            </div>

            <div class="compare-center">
                <div class="compare-term">
                    <ul>
                        <li>
                            <div class="compare-img"></div>
                        </li>
                        <li class="pro-nm">商品名稱</li>
                        <li class="pro-brand">品牌</li>
                        <li class="pro-color">顏色</li>
                        <li class="pro-size">尺寸</li>
                        <li class="pro-weight">重量</li>
                        <li class="pro-rom">容量</li>
                        <li class="pro-ram">記憶體</li>
                        <li class="pro-core">處理器</li>
                        <li class="pro-speed">速度</li>
                        <li class="pro-screensize">螢幕尺寸</li>
                        <li class="pro-screenresolution">螢幕像素</li>
                        <li class="pro-rearcam">後鏡頭</li>
                        <li class="pro-frontcam">前鏡頭</li>
                        <li class="pro-battercapacity">電池容量</li>
                        <li class="pro-talktime">使用時間</li>
                        <li class="pro-os">OS</li>
                        <li class="pro-connstandard">通訊標準</li>
                        <li class="pro-price">價格</li>
                     </ul>
                </div>
                <div class="compare-item-father">
                    <div class="compare-phone"></div>
                    <div class="compare-pad"></div>
                    <div class="compare-wear"></div>
                </div>
                <div class="compare-item-empty">
                    <div class="compare-item-container">
                        <div id="none" class="compare-item-content">
                             <ul>
                                <li>
                                    <div class="compare-img">
                                        <img class="compareEmptyImg" src="images/compareAdd.gif" />
                                    </div>
                                </li>
                                <li class="pro-nm">商品名稱</li>
                                <li class="pro-brand">品牌</li>
                                <li class="pro-color">顏色</li>
                                <li class="pro-size">尺寸</li>
                                <li class="pro-weight">重量</li>
                                <li class="pro-rom">容量</li>
                                <li class="pro-ram">記憶體</li>
                                <li class="pro-core">處理器</li>
                                <li class="pro-speed">速度</li>
                                <li class="pro-screensize">螢幕尺寸</li>
                                <li class="pro-screenresolution">螢幕像素</li>
                                <li class="pro-rearcam">後鏡頭</li>
                                <li class="pro-frontcam">前鏡頭</li>
                                <li class="pro-battercapacity">電池容量</li>
                                <li class="pro-talktime">使用時間</li>
                                <li class="pro-os">OS</li>
                                <li class="pro-connstandard">通訊標準</li>   
                                 <li class="pro-price">價格</li>
                             </ul>
                        </div>
                      </div>
                </div>

            </div>
                

        </div>
        <div class="compare-bottom">
            <div class="propose-container">
                <div class="propose-item-container">
                    <div class="propose-item">
                        <div class="propose-item-img">
                            <img src="images/phone.png" />
                        </div>
                        <span>iphone5</span>
                    </div>
                </div>
                <div class="propose-item-container">
                    <div class="propose-item">
                        <div class="propose-item-img">
                            <img src="images/phone.png" />
                        </div>
                        <span>iphone5</span>
                    </div>
                </div>
                <div class="propose-item-container">
                    <div class="propose-item">
                        <div class="propose-item-img">
                            <img src="images/phone.png" />
                        </div>
                        <span>iphone5</span>
                    </div>
                </div>
                <div class="propose-item-container">
                    <div class="propose-item">
                        <div class="propose-item-img">
                            <img src="images/phone.png" />
                        </div>
                        <span>iphone5</span>
                    </div>
                </div>
                <div class="propose-item-container">
                    <div class="propose-item">
                        <div class="propose-item-img">
                            <img src="images/phone.png" />
                        </div>
                        <span>iphone5</span>
                    </div>
                </div>
                <div class="propose-item-container">
                    <div class="propose-item">
                        <div class="propose-item-img">
                            <img src="images/phone.png" />
                        </div>
                        <span>iphone5</span>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="item-select-container ">
        <div class="item-select-content">
            <select id="CategorySelect" name="CategorySelect" class="form-control upload-ubox-select" title="選擇種類">
                <option selected="selected" value="-1">種類</option>
            </select>
            <select id="BrandSelect" name="BrandSelect" class="form-control upload-ubox-select" title="選擇品牌">
                <option selected="selected" value="-1">品牌</option>
            </select>
            <select id="ProductSelect" name="ProductSelect" class="form-control upload-ubox-select" title="選擇型號">
                <option selected="selected" value="-1">型號</option>
            </select>
            <div id="btnAddCompareProduct"class="btn btn-danger">
                <span><i class="glyphicon glyphicon-flash"></i>比拼</span>
            </div>
            <img class='item-select-cancel' src="images/icon-cancel.png" />
        </div>
    </div>

    <script src="Scripts/ComparePage.js"></script>
    <script>


        // Delete Product Event
        $('.compare-item-father').on('click', '.compare-item-prop', function () { deleteItem($(this))});

        // Category Change Event
        $('.cate-phone, .cate-pad, .cate-wear').click(function () { compareChange($(this))});

        // Highlight MouseEnter MouseLeave Event
        var ChooseItem;
        $('.compare-center').on('mouseenter', 'li', function () {
            ChooseItem = $(this).attr('class')
            $('.' + ChooseItem).addClass('compare-mouse-on');
        });
        $('.compare-center').on('mouseleave', 'li', function () {
            $('.' + ChooseItem).removeClass('compare-mouse-on');
        });

        // Propose Item Click Event
        $('.propose-container').on('click', '.propose-item-container', function () {
            proposeItemClick($(this));
        });

        // Selected Change Event
        $('#BrandSelect, #CategorySelect').change(compareSelectChange);

        function loadSelectCategory(){
            $.get('Handler/HandlerCompare.ashx', { status: 'getSelectCategory' }, function (data) {
                for (var i = 0; i < data.length; i++) {
                    var strCate = '<option value="' + data[i].CategoryID + '">' + data[i].CategoryName + '</option>';
                    $('#CategorySelect').append(strCate);
                }
            });
        }
        function loadSelectBrand() {
            $.get('Handler/HandlerCompare.ashx', { status: 'getSelectBrand' }, function (data) {
                for (var i = 0; i < data.length; i++) {
                    var strBrand = '<option value="' + data[i].BrandID + '">' + data[i].BrandName + '</option>';
                    $('#BrandSelect').append(strBrand);
                }
            });
        }

        function compareSelectChange() {
            var CategoryID = $('#CategorySelect').val();
            var BrandID = $('#BrandSelect').val();

            removeProductOption()
            if (CategoryID != -1 && BrandID != -1) {
                $.get('Handler/HandlerCompare.ashx', { status: 'getSelectProduct', brandID: BrandID, cateID: CategoryID }, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var strPro = '<option value="' + data[i].ProductID + '">' + data[i].ProductName + '</option>';
                        $('#ProductSelect').append(strPro);
                    }
                });
            }
        }

        function removeProductOption() {
            $('#ProductSelect option').each(function () {
                if ($(this).val() > -1) {
                    $(this).remove();
                }
            })
        }

        
        // Load Product
        $(function () {
            loadProduct();
            loadSelectCategory();
            loadSelectBrand();
        });

        // Btn Add Compare Product Event
        $('#btnAddCompareProduct').click(function () {
            var arr = [];
            var proID = $('#ProductSelect').val();
            var cateID = parseInt($('#CategorySelect').val());
            var cookieType;
            if (proID == -1) {
                uboxWarning('請選擇商品');
            }
            else {
                switch (cateID) {
                    case 1:
                        cookieType = 'phone';
                        break;
                    case 2:
                        cookieType = 'pad';
                        break;
                    case 3:
                        cookieType = 'wear';
                        break;
                }
                if ($.cookie(cookieType) != null) {
                    var arr = $.cookie(cookieType).split(',');
                    if ($.inArray(proID, arr) == -1) {
                        if (arr.length < 5) {
                            addItem(proID);
                            uboxWarning('加入比拚');
                            
                            arr.push(proID);
                            $.cookie(cookieType, arr);
                            arr = arr.toString();
                            saveCompareRecord(arr, cateID);
                        }
                        else {
                            uboxWarning('已超過五樣商品');
                        }
                    }
                    else {
                        uboxWarning('此商品已加入比拚');
                    }
                }
                else {
                    addItem(proID);
                    uboxWarning('加入比拚');
                    arr.push(proID);
                    $.cookie(cookieType, arr);
                }

                if (arr != null && $.type(arr)=='string') {
                    arr = arr.split(',');
                }
                if (arr.length == 5) {
                    hideCompareEmpty();
                    hideProposeContainer();
                }
                else if (arr.length == 0) {
                    showCompareEmpty();
                    hideProposeContainer();
                }
                else {
                    showCompareEmpty();
                    showProposeContainer();
                }
                switch (cateID) {
                    case 1:
                        showComparePhone();
                        getRefer(1);
                        break;
                    case 2:
                        showComparePad();
                        getRefer(2);
                        break;
                    case 3:
                        showCompareWear();
                        getRefer(3);
                        break;
                }
            }
        });

        $('.compare-img').click(function () { showElement($('.item-select-container')); });
        $('.item-select-cancel').click(function () { hideElement($('.item-select-container')); });
    </script>

</asp:Content>
